<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script>
        function change_pic(pic_path) {
            document.getElementById('pic').src=pic_path;
        }
    </script>
</head>

<body>

<img id="pic" src="./pic/img_3.png" alt="心情">
<!--<p>当前你的心情是：-->
<!--&lt;!&ndash;    元素内的js代码&ndash;&gt;-->
<!--    <button onclick="document.getElementById('pic').src='./pic/img.png'">开心</button>-->
<!--    <button onclick="document.getElementById('pic').src='./pic/img_1.png'">愤怒</button>-->
<!--    <button onclick="document.getElementById('pic').src='./pic/img_2.png'">难过</button>-->
<!--</p>-->

<p>当前你的心情是：
<!--    元素内的js代码-->
    <button onclick=change_pic('./pic/img.png')>开心</button>
    <button onclick=change_pic('./pic/img_1.png')>愤怒</button>
    <button onclick=change_pic('./pic/img_2.png')>难过</button>
</p>

</body>


</html>